<!DOCTYPE HTML>
<html class="no-js">
<head>
<!-- Basic Page Needs
  ================================================== -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Real Spaces - Wordpress Real Estate Theme</title>
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="author" content="">
<!-- Mobile Specific Metas
  ================================================== -->
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
<meta name="format-detection" content="telephone=no">
<!-- CSS
  ================================================== -->
<link href="css/bootstrap.css" rel="stylesheet" type="text/css">
<link href="css/style.css" rel="stylesheet" type="text/css">
<link href="plugins/prettyphoto/css/prettyPhoto.css" rel="stylesheet" type="text/css">
<link href="plugins/owl-carousel/css/owl.carousel.css" rel="stylesheet" type="text/css">
<link href="plugins/owl-carousel/css/owl.theme.css" rel="stylesheet" type="text/css">
<!--[if lte IE 8]><link rel="stylesheet" type="text/css" href="css/ie8.css" media="screen" /><![endif]-->
<!-- Color Style -->
<link class="alt" href="colors/color10.css" rel="stylesheet" type="text/css">
<link href="style-switcher/css/style-switcher.css" rel="stylesheet" type="text/css">
<!-- SCRIPTS
  ================================================== -->
<script src="js/modernizr.js"></script><!-- Modernizr -->
</head>
<body>
<!--[if lt IE 7]>
	<p class="chromeframe">You are using an outdated browser. <a href="http://browsehappy.com/">Upgrade your browser today</a> or <a href="http://www.google.com/chromeframe/?redirect=true">install Google Chrome Frame</a> to better experience this site.</p>
<![endif]-->
<div class="body">
  <!-- Start Site Header -->
  <header class="site-header">
    <div class="top-header hidden-xs">
      <div class="container">
        <div class="row">
          <div class="col-md-4 col-sm-6">
            <ul class="horiz-nav pull-left">
              <li class="dropdown"><a data-toggle="dropdown"><i class="fa fa-user"></i> Login <b class="caret"></b></a>
                <ul class="dropdown-menu">
                  <li><a href="my-properties.html">My properties</a></li>
                  <li><a href="submit.html">Add a property</a></li>
                </ul>
              </li>
              <li><a href="login.html"><i class="fa fa-check-circle"></i> Register</a></li>
              </ul>
          </div>
          <div class="col-md-8 col-sm-6">
            <ul class="horiz-nav pull-right">
                  <li><a href="http://instagram.com/" target="_blank"><i class="fa fa-instagram"></i></a></li>
                  <li><a href="http://facebook.com/" target="_blank"><i class="fa fa-facebook"></i></a></li>
                  <li><a href="http://twitter.com/" target="_blank"><i class="fa fa-twitter"></i></a></li>
              </ul>
            </div>
        </div>
      </div>
    </div>
    <div class="middle-header">
      <div class="container">
        <div class="row">
          <div class="col-md-4 col-sm-8 col-xs-8">
            <h1 class="logo"> <a href="index.html"><img src="images/logo.png" alt="Logo"></a> </h1>
          </div>
          <div class="col-md-8 col-sm-4 col-xs-4">
              <div class="contact-info-blocks hidden-sm hidden-xs">
                  <div>
                      <i class="fa fa-phone"></i> Free Line For You
                    <span>080 378678 90</span>
                </div>
                  <div>
                      <i class="fa fa-envelope"></i> Email Us
                    <span>sales@realspaces.com</span>
                </div>
                  <div>
                      <i class="fa fa-clock-o"></i> Working Hours
                    <span>09:00 to 17:00</span>
                </div>
             </div>
              <a href="#" class="visible-sm visible-xs menu-toggle"><i class="fa fa-bars"></i></a>
          </div>
        </div>
      </div>
    </div>
    <div class="main-menu-wrapper">
      <div class="container">
        <div class="row">
          <div class="col-md-12">
            <nav class="navigation">
              <ul class="sf-menu">
                <li><a href="index.html">Home</a>
                  <ul class="dropdown">
                    <li><a href="index.html">Version 1</a></li>
                    <li><a href="index1.html">Version 2</a></li>
                  </ul>
                </li>
                <li><a href="about.html">About Us</a></li>
                <li><a href="login.html">Register as Agent</a></li>
                <li><a href="javascript:;">Pages</a>
                  <ul class="dropdown">
                    <li><a href="agents.html">Agents</a></li>
                    <li><a href="single-agent.html">Agent Single</a></li>
                    <li><a href="my-properties.html">Agent Properties</a></li>
                    <li><a href="submit.html">List a property</a></li>
                    <li><a href="pricing.html">Pricing</a></li>
                    <li><a href="login.html">Register/Login</a></li>
                    <li><a href="404.html">404</a></li>
                  </ul>
                </li>
                <li><a href="javascript:;">Properties</a>
                  <ul class="dropdown">
                    <li><a href="javascript:;">Listing</a>
                      <ul>
                          <li><a href="simple-listing.html">Simple Listing</a></li>
                          <li><a href="listing-map.html">Simple Listing with map</a></li>
                          <li><a href="simple-listing-fw.html">Full Width Listing</a></li>
                          <li><a href="grid-listing.html">Grid Listing</a></li>
                          <li><a href="grid-map.html">Grid Listing with map</a></li>
                          <li><a href="grid-listing-fw.html">Full Width Grid</a></li>
                        </ul>
                    </li>
                    <li><a href="javascript:;">Types</a>
                      <ul>
                          <li><a href="property-type.html">Villa</a></li>
                          <li><a href="property-type.html">Single Home</a></li>
                          <li><a href="property-type.html">Cottage</a></li>
                          <li><a href="property-type.html">Family House</a></li>
                          <li><a href="property-type.html">Apartment</a></li>
                        </ul>
                    </li>
                    <li><a href="javascript:;">Contract type</a>
                      <ul>
                          <li><a href="contract-type.html">Sale</a></li>
                          <li><a href="contract-type.html">Rent</a></li>
                          <li><a href="contract-type.html">Sold</a></li>
                        </ul>
                    </li>
                    <li><a href="property-detail.html">Single Property</a></li>
                    <li><a href="property-detail-fw.html">Single Property Full Width</a></li>
                  </ul>
                </li>
                <li><a href="javascript:;">Features</a>
                  <ul class="dropdown">
                    <li><a href="shortcodes.html">Shortcodes</a></li>
                    <li><a href="typography.html">Typography</a></li>
                  </ul>
                </li>
                <li><a href="javascript:;">Gallery</a>
                  <ul class="dropdown">
                    <li><a href="gallery-2cols.html">2 Columns</a></li>
                    <li><a href="gallery-3cols.html">3 Columns</a></li>
                    <li><a href="gallery-4cols.html">4 Columns</a></li>
                    <li><a href="gallery-masonry.html">Masonry Grid</a></li>
                  </ul>
                </li>
                <li><a href="javascript:;">Blog</a>
                  <ul class="dropdown">
                    <li><a href="blog-masonry.html">Masonry</a></li>
                    <li><a href="blog-timeline.html">Timeline</a></li>
                    <li><a href="blog-thumbnails.html">Classic</a></li>
                    <li><a href="blog-post.html">Single Post</a></li>
                  </ul>
                </li>
                <li><a href="contact.html">Contact</a></li>
              </ul>
            </nav>
          </div>
        </div>
      </div>
    </div>
  </header>
  <!-- End Site Header --> 
  <!-- Site Showcase -->
  <div class="site-showcase">
  <!-- Start Page Header -->
  <div class="parallax page-header" style="background-image:url(images/page-header1.jpg);">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <h1>Typography</h1>
                </div>
           </div>
       </div>
  </div>
  <!-- End Page Header -->
  </div>
  <!-- Start Content -->
  <div class="main" role="main">
      <div id="content" class="content full">
          <div class="container">
              <div class="page">
                  <div class="row">
                      <div class="col-md-6">
                        <h1>H1 heading style</h1>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, sem quis lacinia faucibus, orci ipsum gravida tortor, vel interdum mi sapien ut justo. Nulla varius consequat magna, id molestie ipsum volutpat quis. Suspendisse consectetur fringilla luctus. Fusce id mi diam, non ornare orci. Pellentesque ipsum erat, facilisis ut venenatis eu, sodales vel dolor.</p>
                        <h2>H2 heading style</h2>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, sem quis lacinia faucibus, orci ipsum gravida tortor, vel interdum mi sapien ut justo. Nulla varius consequat magna, id molestie ipsum volutpat quis. Suspendisse consectetur fringilla luctus. Fusce id mi diam, non ornare orci. Pellentesque ipsum erat, facilisis ut venenatis eu, sodales vel dolor.</p>
                        <h3>H3 heading style</h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, sem quis lacinia faucibus, orci ipsum gravida tortor, vel interdum mi sapien ut justo. Nulla varius consequat magna, id molestie ipsum volutpat quis. Suspendisse consectetur fringilla luctus. Fusce id mi diam, non ornare orci. Pellentesque ipsum erat, facilisis ut venenatis eu, sodales vel dolor.</p>
                        <h4>H4 heading style</h4>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, sem quis lacinia faucibus, orci ipsum gravida tortor, vel interdum mi sapien ut justo. Nulla varius consequat magna, id molestie ipsum volutpat quis. Suspendisse consectetur fringilla luctus. Fusce id mi diam, non ornare orci. Pellentesque ipsum erat, facilisis ut venenatis eu, sodales vel dolor.</p>
                        <h5>H5 heading style</h5>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, sem quis lacinia faucibus, orci ipsum gravida tortor, vel interdum mi sapien ut justo. Nulla varius consequat magna, id molestie ipsum volutpat quis. Suspendisse consectetur fringilla luctus. Fusce id mi diam, non ornare orci. Pellentesque ipsum erat, facilisis ut venenatis eu, sodales vel dolor.</p>
                        <h6>H6 heading style</h6>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, sem quis lacinia faucibus, orci ipsum gravida tortor, vel interdum mi sapien ut justo. Nulla varius consequat magna, id molestie ipsum volutpat quis. Suspendisse consectetur fringilla luctus. Fusce id mi diam, non ornare orci. Pellentesque ipsum erat, facilisis ut venenatis eu, sodales vel dolor.</p>
                      </div>
                      <div class="col-md-6">
                        <h2>Blockquote</h2>
                        <blockquote>
                          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, sem quis lacinia faucibus, orci ipsum gravida tortor, vel interdum mi sapien ut justo. Nulla varius consequat magna, id molestie ipsum volutpat quis. Pellentesque ipsum erat, facilisis ut venenatis eu, sodales vel dolor.</p>
                          <cite>- Author name here</cite> </blockquote>
                        <h2>Labels</h2>
                        <p><span class="label label-primary">Lorem</span> ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, sem quis lacinia faucibus, orci ipsum gravida tortor, vel interdum mi sapien ut justo. Nulla varius consequat magna, id molestie ipsum volutpat quis. Pellentesque ipsum erat, facilisis ut venenatis eu, sodales vel dolor.</p>
                        <p><span class="label label-danger">Lorem</span> ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, sem quis lacinia faucibus, orci ipsum gravida tortor, vel interdum mi sapien ut justo. Nulla varius consequat magna, id molestie ipsum volutpat quis. Pellentesque ipsum erat, facilisis ut venenatis eu, sodales vel dolor.</p>
                        <p><span class="label label-info">Lorem</span> ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, sem quis lacinia faucibus, orci ipsum gravida tortor, vel interdum mi sapien ut justo. Nulla varius consequat magna, id molestie ipsum volutpat quis. Pellentesque ipsum erat, facilisis ut venenatis eu, sodales vel dolor.</p>
                        <p><span class="label label-success">Lorem</span> ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, sem quis lacinia faucibus, orci ipsum gravida tortor, vel interdum mi sapien ut justo. Nulla varius consequat magna, id molestie ipsum volutpat quis. Pellentesque ipsum erat, facilisis ut venenatis eu, sodales vel dolor.</p>
                        <p><span class="label label-warning">Lorem</span> ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, sem quis lacinia faucibus, orci ipsum gravida tortor, vel interdum mi sapien ut justo. Nulla varius consequat magna, id molestie ipsum volutpat quis. Pellentesque ipsum erat, facilisis ut venenatis eu, sodales vel dolor.</p>
                        <h2>Paragraph</h2>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, sem quis lacinia faucibus, orci ipsum gravida tortor, vel interdum mi sapien ut justo. Nulla varius consequat magna, id molestie ipsum volutpat quis. Pellentesque ipsum erat, facilisis ut venenatis eu, sodales vel dolor.</p>
                      </div>
                    </div>
                    <hr>
                    <div class="row">
                      <div class="col-md-12">
                        <h2>Dropcaps</h2>
                      </div>
                      <div class="col-md-6">
                        <p class="drop-caps">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, sem quis lacinia faucibus, orci ipsum gravida tortor, vel interdum mi sapien ut justo. Nulla varius consequat magna, id molestie ipsum volutpat quis. Pellentesque ipsum erat, facilisis ut venenatis eu, sodales vel dolor.</p>
                      </div>
                      <div class="col-md-6">
                        <p class="drop-caps secondary">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sagittis, sem quis lacinia faucibus, orci ipsum gravida tortor, vel interdum mi sapien ut justo. Nulla varius consequat magna, id molestie ipsum volutpat quis. Pellentesque ipsum erat, facilisis ut venenatis eu, sodales vel dolor.</p>
                      </div>
                    </div>
                    <hr>
                    <div class="row">
                      <div class="col-md-12">
                        <h2>Lists</h2>
                      </div>
                    </div>
                    <div class="row">
                      <div class="col-md-6">
                        <h4>Unordered List</h4>
                        <ul class="unordered">
                          <li>Lorem ipsum dolor sit amet</li>
                          <li>Consectetur adipiscing elit</li>
                          <li>Integer molestie lorem at massa</li>
                          <li>Facilisis in pretium nisl aliquet</li>
                          <li> Nulla volutpat aliquam velit
                            <ul>
                              <li>Phasellus iaculis neque</li>
                              <li>Purus sodales ultricies</li>
                              <li>Vestibulum laoreet porttitor sem</li>
                              <li>Ac tristique libero volutpat at</li>
                            </ul>
                          </li>
                          <li>Faucibus porta lacus fringilla vel</li>
                          <li>Aenean sit amet erat nunc</li>
                          <li>Eget porttitor lorem</li>
                        </ul>
                        <h4 class="spaced">Description List</h4>
                        <dl>
                          <dt>Description lists</dt>
                          <dd>A description list is perfect for defining terms.</dd>
                          <dt>Euismod</dt>
                          <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
                          <dd>Donec id elit non mi porta gravida at eget metus.</dd>
                          <dt>Malesuada porta</dt>
                          <dd>Etiam porta sem malesuada magna mollis euismod.</dd>
                        </dl>
                      </div>
                      <div class="col-md-6">
                        <h4>Ordered List</h4>
                        <ol>
                          <li>Facilisis in pretium nisl aliquet</li>
                          <li>Faucibus porta lacus fringilla vel</li>
                          <li>Aenean sit amet erat nunc</li>
                          <li>Eget porttitor lorem</li>
                          <li>Consectetur adipiscing elit</li>
                          <li>Integer molestie lorem at massa</li>
                          <li>Facilisis in pretium nisl aliquet</li>
                          <li>Faucibus porta lacus fringilla vel</li>
                          <li>Aenean sit amet erat nunc</li>
                        </ol>
                        <h4 class="spaced">Icons List</h4>
                        <ul class="hearts">
                          <li><i class="icon icon-envelope-alt"></i> Fusce sit amet orci quis arcu vestibulum vestibulum sed ut felis. </li>
                          <li><i class="icon icon-film"></i> Phasellus in risus quis lectus iaculis vulputate id quis nisl.</li>
                        </ul>
                        <ul class="checks">
                          <li><i class="icon icon-envelope-alt"></i> Fusce sit amet orci quis arcu vestibulum vestibulum sed ut felis. </li>
                          <li><i class="icon icon-film"></i> Phasellus in risus quis lectus iaculis vulputate id quis nisl.</li>
                        </ul>
                        <ul class="carets">
                          <li><i class="icon icon-envelope-alt"></i> Fusce sit amet orci quis arcu vestibulum vestibulum sed ut felis. </li>
                          <li><i class="icon icon-film"></i> Phasellus in risus quis lectus iaculis vulputate id quis nisl.</li>
                        </ul>
                        <ul class="chevrons">
                          <li><i class="icon icon-envelope-alt"></i> Fusce sit amet orci quis arcu vestibulum vestibulum sed ut felis. </li>
                          <li><i class="icon icon-film"></i> Phasellus in risus quis lectus iaculis vulputate id quis nisl.</li>
                        </ul>
                        <h4 class="spaced">Inline</h4>
                        <ul class="inline">
                          <li>Lorem ipsum</li>
                          <li>Phasellus iaculis</li>
                          <li>Nulla volutpat</li>
                        </ul>
                      </div>
                    </div>
                    <hr>
                    <div class="row">
                      <div class="col-md-12">
                        <h2>Code</h2>
                      </div>
                    </div>
                    <div class="row">
                      <div class="col-md-6">
                        <h4>Inline</h4>
                        <p>For example, <code>&lt;section&gt;</code> should be wrapped as inline.</p>
                      </div>
                      <div class="col-md-6">
                        <h4>Basic Block</h4>
                        <pre>&lt;p&gt;Sample text here...&lt;/p&gt;</pre>
                      </div>
                    </div>
                    <hr>
                    <div class="row">
                      <div class="col-md-12">
                        <h2>Tables</h2>
                      </div>
                    </div>
                    <div class="row">
                      <div class="col-md-12">
                        <h4>Striped</h4>
                        <table class="table table-striped">
                          <thead>
                            <tr>
                              <th> # </th>
                              <th> First Name </th>
                              <th> Last Name </th>
                              <th> Username </th>
                            </tr>
                          </thead>
                          <tbody>
                            <tr>
                              <td> 1 </td>
                              <td> Mark </td>
                              <td> Otto </td>
                              <td> @mdo </td>
                            </tr>
                            <tr>
                              <td> 2 </td>
                              <td> Jacob </td>
                              <td> Thornton </td>
                              <td> @fat </td>
                            </tr>
                            <tr>
                              <td> 3 </td>
                              <td> Larry </td>
                              <td> the Bird </td>
                              <td> @twitter </td>
                            </tr>
                          </tbody>
                        </table>
                        <h4 class="spaced">Bordered</h4>
                        <table class="table table-bordered">
                          <thead>
                            <tr>
                              <th> # </th>
                              <th> First Name </th>
                              <th> Last Name </th>
                              <th> Username </th>
                            </tr>
                          </thead>
                          <tbody>
                            <tr>
                              <td> 1 </td>
                              <td> Mark </td>
                              <td> Otto </td>
                              <td> @mdo </td>
                            </tr>
                            <tr>
                              <td> 2 </td>
                              <td> Jacob </td>
                              <td> Thornton </td>
                              <td> @fat </td>
                            </tr>
                            <tr>
                              <td> 3 </td>
                              <td> Larry </td>
                              <td> the Bird </td>
                              <td> @twitter </td>
                            </tr>
                          </tbody>
                        </table>
                      </div>
      			</div>
   		 	</div>
  		</div>
  	</div>
  </div>
  <!-- Start Site Footer -->
  <footer class="site-footer">
      <div class="container">
          <div class="row">
            <div class="col-md-3 col-sm-6 footer-widget widget">
                <h3 class="widgettitle">Latest News</h3>
                  <ul>
                      <li>
                          <a href="blog-post.html">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</a>
                          <span class="meta-data">1 March, 2014</span>
                      </li>
                      <li>
                      <a href="blog-post.html">Lorem ipsum dolor sit amet elit, consectetur adipiscing.</a>
                          <span class="meta-data">28 February, 2014</span>
                      </li>
                      <li>
                      <a href="blog-post.html">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</a>
                          <span class="meta-data">26 February, 2014</span>
                      </li>
                  </ul>
              </div>
            <div class="col-md-3 col-sm-6 footer-widget widget">
                <h3 class="widgettitle">Useful Links</h3>
               <ul>
                <li><a href="submit.html">Add your listing</a></li>
                <li><a href="login.html">Become an agent</a></li>
                <li><a href="pricing.html">Pricing</a></li>
                <li><a href="about.html">About us</a></li>
                <li><a href="shortcodes.html">Theme features</a></li>
               </ul>
           </div>
            <div class="col-md-3 col-sm-6 footer-widget widget">
              <h3 class="widgettitle">Twitter Updates</h3>
                  <ul class="twitter-widget"></ul>
           </div>
            <div class="col-md-3 col-sm-6 footer-widget widget">
                <h3 class="widgettitle">Our Newsletter</h3>
               <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla convallis egestas rhoncus. Donec facilisis fermentum sem, ac viverra ante luctus vel.</p>
               <form>
                    <input type="email" name="email" id="email" placeholder="Enter your email" class="form-control">
                  <input type="submit" name="submit" class="btn btn-primary btn-block btn-lg" value="Subscribe">
               </form>
           </div>
       </div>
   </div>
  </footer>
  <footer class="site-footer-bottom">
    <div class="container">
      <div class="row">
        <div class="copyrights-col-left col-md-6 col-sm-6">
          <p>&copy; 2014 RealSpaces. All Rights Reserved</p>
        </div>
        <div class="copyrights-col-right col-md-6 col-sm-6">
          <div class="social-icons">
              <a href="https://www.facebook.com/" target="_blank"><i class="fa fa-facebook"></i></a>
             <a href="https://twitter.com/" target="_blank"><i class="fa fa-twitter"></i></a>
             <a href="http://www.pinterest.com/" target="_blank"><i class="fa fa-pinterest"></i></a>
             <a href="https://plus.google.com/" target="_blank"><i class="fa fa-google-plus"></i></a>
             <a href="http://www.pinterest.com/" target="_blank"><i class="fa fa-youtube"></i></a>
             <a href="#"><i class="fa fa-rss"></i></a>
          </div>
        </div>
      </div>
    </div>
  </footer>
  <!-- End Site Footer -->
  <a id="back-to-top"><i class="fa fa-angle-double-up"></i></a> 
</div>
<script src="js/jquery-2.0.0.min.js"></script> <!-- Jquery Library Call --> 
<script src="plugins/prettyphoto/js/prettyphoto.js"></script> <!-- PrettyPhoto Plugin --> 
<script src="plugins/owl-carousel/js/owl.carousel.min.js"></script> <!-- Owl Carousel --> 
<script src="plugins/flexslider/js/jquery.flexslider.js"></script> <!-- FlexSlider --> 
<script src="js/helper-plugins.js"></script> <!-- Plugins --> 
<script src="js/bootstrap.js"></script> <!-- UI --> 
<script src="js/waypoints.js"></script> <!-- Waypoints --> 
<script src="js/init.js"></script> <!-- All Scripts --> 
<script src="style-switcher/js/jquery_cookie.js"></script> 
<script src="style-switcher/js/script.js"></script>
<!-- Style Switcher Start --> 
</body>
</html>